<template>
  <div class='question-container'>
    <div class="app-container">
      <el-card shadow="never">
          <!-- 顶部按钮 -->
        <el-row class="top-btn">
          <el-col :span="12"><span class="text">说明：目前支持学科和关键字条件筛选</span></el-col>
          <el-col :span="12" class="btn-container"><el-button class="add-btn" icon="el-icon-edit" type="success" size="small" @click="$router.push('/questions/new')">{{$t('table.add')}}</el-button></el-col>
        </el-row>
        <!-- 筛选区域 -->
        <el-form :model="searchForm" label="right" label-width="80px" ref="searchForms">
          <!-- 第一行 -->
          <el-row>
            <el-col :span="6">
              <el-form-item label="学科" prop="subjectID">
                <el-select v-model="searchForm.subjectID" placeholder="请选择" @change="getSecSubject">
                  <el-option
                    v-for="(item, i) in subjectList"
                    :key="i"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二级目录" prop="catalogID">
                <el-select v-model="searchForm.catalogID" placeholder="请选择" @change="getTags">
                  <el-option
                    v-for="(item, i) in SecondaryDirectoryList"
                    :key="i"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签" prop="tags">
                <el-select v-model="searchForm.tags" placeholder="请选择">
                  <el-option
                    v-for="(item, i) in tagsList"
                    :key="i"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关键字" prop="keyword">
                <el-input v-model="searchForm.keyword" placeholder="根据题干搜索"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第二行 -->
          <el-row>
            <el-col :span="6">
              <el-form-item label="试题类型" prop="questionType">
                <el-select v-model="searchForm.questionType" placeholder="请选择">
                  <el-option
                    v-for="(item,i) in questionType"
                    :key="i"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="难度" prop="difficulty">
                <el-select v-model="searchForm.difficulty" placeholder="请选择">
                  <el-option
                    v-for="(item,i) in difficulty"
                    :key="i"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="方向" prop="direction">
                <el-select v-model="searchForm.direction" placeholder="请选择">
                  <el-option
                    v-for="(item,i) in direction"
                    :key="i"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="录入人" prop="creatorID">
                <el-select v-model="searchForm.creatorID" placeholder="请选择">
                  <el-option
                    v-for="(item, i) in userList"
                    :key="i"
                    :label="item.username"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第三行 -->
          <el-row>
            <el-col :span="6">
              <el-form-item label="题目备注" prop="remarks">
                <el-input v-model="searchForm.remarks"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业简称" prop="shortName">
                <el-input v-model="searchForm.shortName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" class="loacl">
              <el-form-item label="城市" prop="province">
                <el-select v-model="searchForm.province" placeholder="请选择" @change="provinceChange">
                  <el-option
                    v-for="(item, i) in provincesList"
                    :key="i"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="city">
                <el-select v-model="searchForm.city" placeholder="请选择">
                  <el-option
                    v-for="(item, i) in cityList"
                    :key="i"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item class="last-form-item">
                <el-button size="mini" type="default" @click="clear">{{$t('table.clear')}}</el-button>
                <el-button size="mini" type="primary" @click="search">{{$t('table.search')}}</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- 提示框 -->
        <el-alert
          :title="`共有${total}条数据`"
          type="info"
          :closable="false"
          show-icon
        > 
        </el-alert>
        <!-- table表格 -->
        <el-table
          :data="tableDataList"
          style="width: 100%">
          <el-table-column
            prop="number"
            :label="$t('table.questionId')"
            width="250">
          </el-table-column>
          <el-table-column
            prop="subject"
            :label="$t('table.subject')"
            width="100">
          </el-table-column>
          <el-table-column
            prop="catalog"
            :label="$t('table.catalogue')"
            width="180">
          </el-table-column>
          <el-table-column
            :label="$t('table.type')"
            width="100">
              <template slot-scope="scope">
                <span v-if="scope.row.questionType == 1">单选</span>
                <span v-else-if="scope.row.questionType == 2">多选</span>
                <span v-else>简答</span>
              </template>
          </el-table-column>
          <el-table-column
            :label="$t('table.content')"
            width="250">
            <template slot-scope="scope">
              <div
                v-html="scope.row.question"
              ></div>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('table.date')"
            width="220">
            <template slot-scope="scope">
              {{ scope.row.addDate | parseTimeByString }}
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('table.difficulty')"
            width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.difficulty == 1">简单</span>
              <span v-else-if="scope.row.difficulty == 2">一般</span>
              <span v-else>困难</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="creatorID"
            :label="$t('table.operator')"
            width="180">
              <template slot-scope="scope">
                <span v-if="scope.row.creatorID == 2">超级管理员</span>
                <span v-else>录入管理员</span>
              </template>
          </el-table-column>
          <el-table-column
             :label="$t('table.giao')"
            width="260"
            >
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-view" size="mini" plain circle @click="toView(scope.row)"></el-button>
              <el-button type="success" icon="el-icon-edit" size="mini" plain circle @click="$router.push({ path: 'new', query: { id: scope.row.id }})"></el-button>
              <el-button type="danger" icon="el-icon-delete" size="mini" plain circle @click="toRemove(scope.row)"></el-button>
              <el-button type="warning" icon="el-icon-check" size="mini" plain circle @click="toJingxuan(scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div style="text-align: right;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchForm.page"
            :page-sizes="[1, 5, 10, 20]"
            :page-size="5"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
        <!-- 预览对话框 -->
        <el-dialog
          v-if="dialogVisible"
          title="题目预览"
          :visible.sync="dialogVisible"
          width="50%"
          >
          <questions-preview :receive="id"></questions-preview>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
          </span>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects'
import { simple as simpleSec } from '@/api/hmmm/directorys'
import { simple as tag } from '@/api/hmmm/tags'
import { provinces, citys } from '@/api/hmmm/citys'
import { list as tableData, remove, choiceAdd } from '@/api/hmmm/questions'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { simple as createdUser } from '@/api/base/users'
import QuestionsPreview from '../components/questions-preview1'
export default {
  name: 'BasicSubject',
  data () {
    return {
      searchForm: {
        // 选中的学科id
        subjectID: null,
        // 选中的二级科目
        catalogID: null,
        // 选中的标签
        tags: null,
        // 关键字
        keyword: '',
        // 类型
        questionType: '',
        // 难度
        difficulty: '',
        // 方向
        direction: '',
        // 录入人
        creatorID: null,
        // 题目备注
        remarks: '',
        // 企业简称
        shortName: '',
        // 省份
        province: '',
        // 城市
        city: '',
        page: 1,
        pagesize: 5
      },
      // 学科的列表
      subjectList: [],
      // 二级目录列表
      SecondaryDirectoryList: [],
      // 标签列表
      tagsList: [],
      // 省份
      provincesList: [],
      // 城市
      cityList: [],
      // 表格数据
      tableDataList: [],
      difficulty,
      questionType,
      direction,
      userList: [],
      total: 0,
      dialogVisible: false,
      id: null
    }
  },
  created () {
    // 获取简单学科列表
    this.getSubject()
    this.getTableData()
    // 录入人
    this.getCreatedUser()
  },
  mounted () {
    this.provincesList = provinces()
  },
  methods: {
    async getSubject () {
      const res = await simple()
      // console.log(res)
      if (res.status === 200) {
        this.subjectList = res.data
      } else {
        this.$message.error('获取数据失败')
      }
    },
    async getSecSubject () {
      const res = await simpleSec({
        subjectID:this.searchForm.subjectID
      })
      // console.log(res)
      if (res.status === 200) {
       this.SecondaryDirectoryList = res.data
      //  console.log(this.SecondaryDirectoryList)
      } else {
        this.$message.error('获取数据失败')
      }
    },
    async getTags () {
      const res = await tag({
        subjectID:this.searchForm.subjectID
      })
      // console.log(res)
      if (res.status === 200) {
       this.tagsList = res.data
      //  console.log(this.tagsList)
      } else {
        this.$message.error('获取数据失败')
      }
    },
    provinceChange () {
      this.searchForm.city = ''
      this.cityList = citys(this.searchForm.province)
    },
    // 清除表单
    clear (searchForm) {
      this.$refs.searchForms.resetFields()
      this.getTableData()
    },
    async getTableData () {
      const res = await tableData(this.searchForm)
      if (res.status === 200) {
        this.tableDataList = res.data.items
        this.total = res.data.counts
        // console.log(res.data)
      } else {
        this.$message.error('获取数据失败')
      }
    },
    // 获取录入人
    async getCreatedUser () {
      const res = await createdUser()
      if (res.status === 200) {
        this.userList = res.data
      } else {
        this.$message.error('获取数据失败')
      }
    },
    // 搜索
    search () {
      this.getTableData()
    },
    handleSizeChange (val) {
      this.searchForm.pagesize = val
      this.getTableData()
    },
    handleCurrentChange (val) {
      this.searchForm.page = val
      this.getTableData()
    },
    // 预览
    toView (row) {
      this.id = row.id
      this.dialogVisible = true
      // console.log(row)
    },
    // 删除
    async toRemove (row) {
      let id = row.id
      const res = await this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (res !== 'confirm') return this.$message.info('已取消删除')
      await remove({
        id
      })
      this.getTableData()
    },
    // 加入精选题库
    async toJingxuan (row) {
      let id = row.id
      const res = await this.$confirm('将此题目加入精选题库, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (res !== 'confirm') return this.$message.info('已取消加入')
      await choiceAdd({
        id,
        choiceState: 1
      })
      this.getTableData()
    }
  },
  components: {
    QuestionsPreview
  }
}
</script>

<style scoped lang='less'>
 .question-container {
  .top-btn {
    margin-bottom: 15px;
  }
  .text {
    font-size: 12px;
    color: #ffc0cb;
  }
  .btn-container, .last-form-item {
    text-align: right;
  }
  .el-select {
    width: 100%;
  }
  .loacl {
    display: flex;
  }
  .el-alert {
    margin-bottom: 20px;
  }
  .el-input__inner {
    height: 36px;
  } 
  .el-pagination {
    margin-top: 15px;
  }
}
</style>
